<!-- jquery plugins -->
<script src="/light-blue/lib/icheck.js/jquery.icheck.js"></script>
<script src="/light-blue/lib/sparkline/jquery.sparkline.js"></script>
<script src="/light-blue/lib/jquery.slimscroll.js"></script>

<!-- d3, nvd3-->
<script src="/light-blue/lib/nvd3/lib/d3.v2.js"></script>
<script src="/light-blue/lib/nvd3/nv.d3.custom.js"></script>

<!-- nvd3 models -->
<script src="/light-blue/lib/nvd3/src/models/scatter.js"></script>
<script src="/light-blue/lib/nvd3/src/models/axis.js"></script>
<script src="/light-blue/lib/nvd3/src/models/legend.js"></script>
<script src="/light-blue/lib/nvd3/src/models/multiBar.js"></script>
<script src="/light-blue/lib/nvd3/src/models/multiBarChart.js"></script>
<script src="/light-blue/lib/nvd3/src/models/line.js"></script>
<script src="/light-blue/lib/nvd3/src/models/lineChart.js"></script>
<script src="/light-blue/lib/nvd3/stream_layers.js"></script>

<!--backbone and friends -->
<script src="/light-blue/lib/backbone/underscore-min.js"></script>
<script src="/light-blue/lib/backbone/backbone-min.js"></script>
<script src="/light-blue/lib/backbone/backbone.localStorage-min.js"></script>

<!-- page specific -->
<script src="/light-blue/js/index.js"></script>
<script src="/light-blue/js/chat.js"></script>

    <div class="row">
        <div class="col-md-12">
            <h2 class="page-title">Dashboard <!--<small>Statistics and more</small>--></h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <section class="widget">
                <header>
                    <h4>
                        <i class="icon-group"></i>
                        Visits
                        <small>
                            Based on a three months data
                        </small>
                    </h4>
                </header>
                <div class="body no-margin">
                    <div id="visits-chart" class="chart visits-chart">
                        <svg></svg>
                    </div>
                    <div class="visits-info well well-sm">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6">
                                <div class="key"><i class="eicon-users"></i> Total Traffic</div>
                                <div class="value">24 541 <i class="icon-caret-up color-green"></i></div>
                            </div>
                            <div class="col-sm-3 col-xs-6">
                                <div class="key"><i class="eicon-user"></i> Unique Visits</div>
                                <div class="value">14 778 <i class="icon-caret-down color-red"></i></div>
                            </div>
                            <div class="col-sm-3 col-xs-6">
                                <div class="key"><i class="icon-plus-sign-alt"></i> Revenue</div>
                                <div class="value">$3 583.18 <i class="icon-caret-up color-green"></i></div>
                            </div>
                            <div class="col-sm-3 col-xs-6">
                                <div class="key"><i class="icon-user"></i> Total Sales</div>
                                <div class="value">$59 871.12 <i class="icon-caret-down color-red"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="widget">
                <header>
                    <h4>
                        <i class="icon-shopping-cart"></i>
                        Traffic Sources
                        <small>
                            One month tracking
                        </small>
                    </h4>
                </header>
                <div class="body">
                    <table class="table table-striped no-margin sources-table">
                        <thead>
                        <tr>
                            <th class="source-col-header">Source</th>
                            <th>Amount</th>
                            <th>Change</th>
                            <th class="hidden-xs">Percent.,%</th>
                            <th>Target</th>
                            <th class="chart-col-header hidden-xs">Trend</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><span class="label label-important">Direct</span></td>
                            <td>713</td>
                            <td><strong class="color-green">+53</strong></td>
                            <td class="hidden-xs">+12</td>
                            <td>900</td>
                            <td class="chart-cell hidden-xs">
                                <div id="direct-trend"></div>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="label label-warning">Refer</span></td>
                            <td>562</td>
                            <td><strong>+84</strong></td>
                            <td class="hidden-xs">+64</td>
                            <td>500</td>
                            <td class="chart-cell hidden-xs">
                                <div id="refer-trend"></div>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="label label-success">Social</span></td>
                            <td>148</td>
                            <td><strong class="color-red">-12</strong></td>
                            <td class="hidden-xs">+3</td>
                            <td>180</td>
                            <td class="chart-cell hidden-xs">
                                <div id="social-trend"></div>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="label label-info">Search</span></td>
                            <td>653</td>
                            <td><strong class="color-green">+23</strong></td>
                            <td class="hidden-xs">+43</td>
                            <td>876</td>
                            <td class="chart-cell hidden-xs">
                                <div id="search-trend"></div>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="label label-inverse">Internal</span></td>
                            <td>976</td>
                            <td><strong>+101</strong></td>
                            <td class="hidden-xs">-7</td>
                            <td>844</td>
                            <td class="chart-cell hidden-xs">
                                <div id="internal-trend"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        <div class="col-md-4">
            <section class="widget">
                <header>
                    <h4>
                        <i class="icon-magnet"></i>
                        Server Overview
                    </h4>
                </header>
                <div class="body">
                    <ul class="server-stats">
                        <li>
                            <div class="key pull-right">CPU</div>
                            <div class="stat">
                                <div class="info">60% / 37&deg;C / 3.3 Ghz</div>
                                <div class="progress progress-small">
                                    <div class="progress-bar progress-bar-danger" style="width: 70%;"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="key pull-right">Mem</div>
                            <div class="stat">
                                <div class="info">29% / 4GB (16 GB)</div>
                                <div class="progress progress-small">
                                    <div class="progress-bar" style="width: 29%;"></div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="key pull-right">LAN</div>
                            <div class="stat">
                                <div class="info">6 Mb/s <i class="icon-caret-down"></i> &nbsp; 3 Mb/s <i
                                        class="icon-caret-up"></i></div>
                                <div class="progress progress-small">
                                    <div class="progress-bar progress-bar-inverse" style="width: 48%;"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
